<template>
  <div class="number-card">
    <div class="title-info">
      <div class="title" :style="`color:${color}`">{{title}}</div>
      <div v-if="percentage" class="percentage">
        <div class="iconfont rose" :class="rose?'icon-shangjiantou':'icon-xiajiantou'" :style="`color:${rose?'#0ce19f':'#e8554b'}`"></div>
        <div class="percentage-value">{{percentage}}%</div>
      </div>
    </div>
    <div class="number-info">
      <div class="number-item" :style="`border-color:${color};color:${color}`" :class="item==='.'?'point':''" v-for="(item,index) in numberArr" :key="index">{{item==='.'?'.':item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NumberCard",
  props:{
    number:{
      type:String,
      default:'00.0000'
    },
    title:{
      type:String,
      default:'',
    },
    color:{
      type:String,
      default:'#fff'
    },
    percentage:{
      type:String,
      default:'0.00'
    },
    rose:{
      type:Boolean,
      default:true,
    }
  },
  computed:{
    numberArr(){
      return this.number.split('')
    }
  }
}
</script>

<style scoped lang="scss">
.number-card{
  flex-grow: 1;
  padding: 30px 0;
  .title-info{
    width: 100%;
    display: flex;
    flex-direction: row;
    .title{
      flex-grow: 1;
    }
    .percentage{
      justify-self: flex-end;
      display: flex;
      align-items: center;
      .iconfont{
        font-size: 12px;
        margin-right: 8px;
        font-weight: bold;
      }
      .percentage-value{
        color: #fff;
      }
    }
  }
  .number-info{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    .number-item.point{
      border: none;
      width: 20px;
    }
    .number-item{
      width: 35px;
      border-radius: 7px;
      height: 55px;
      font-size: 28px;
      font-weight: bold;
      border: 1.5px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }
    .number-item:last-child{
      margin-right: 0;
    }
  }
}
</style>
